<template>
	<div id="bookstorage">

		<div class="header">
			<div class="head-top">
				<mt-header title="图书">
					<mt-button icon="back" slot="left" @click='backhome'></mt-button>

					<router-link to="/search" slot="right">
						<img src="../../../static/home/search.png" alt="" width="30px" height="30px" />
					</router-link>
				</mt-header>
			</div>
			<mt-navbar class="home-nav" v-model='active'>
				<mt-tab-item class='nav-title' id='novel'>文学小说</mt-tab-item>
				<mt-tab-item class='nav-title' id='economy'>经济管理</mt-tab-item>
				<mt-tab-item class='nav-title' id='inspirational'>成长励志</mt-tab-item>
				<mt-tab-item class='nav-title' id='arts'>文学艺术</mt-tab-item>
				<mt-tab-item class='nav-title' id='historys'>历史传记</mt-tab-item>
				<mt-tab-item class='nav-title' id='computers'>计算机</mt-tab-item>
				<mt-tab-item class='nav-title' id='science'>社会科学</mt-tab-item>
				<mt-tab-item class='nav-title lastnav' id='life'>生活</mt-tab-item>
			</mt-navbar>
		</div>

		<div class="main">
			<mt-tab-container v-model="active" swipeable>
				<mt-tab-container-item id="novel">

					<novel></novel>
				</mt-tab-container-item>

				<mt-tab-container-item id="economy">

					<economy></economy>
				</mt-tab-container-item>

				<mt-tab-container-item id="inspirational">

					<inspirational></inspirational>
				</mt-tab-container-item>

				<mt-tab-container-item id="arts">

					<arts></arts>
				</mt-tab-container-item>

				<mt-tab-container-item id="historys">

					<historys></historys>
				</mt-tab-container-item>
				<mt-tab-container-item id="computers">

					<computers></computers>
				</mt-tab-container-item>
				<mt-tab-container-item id="science">

					<science></science>
				</mt-tab-container-item>
				<mt-tab-container-item id="life">

					<life></life>
				</mt-tab-container-item>

			</mt-tab-container>
		</div>

	</div>
</template>

<script>
import novel from "./bookstoragelist/novel.vue";
import economy from "./bookstoragelist/novel.vue";
import inspirational from "./bookstoragelist/novel.vue";
import arts from "./bookstoragelist/novel.vue";
import historys from "./bookstoragelist/novel.vue";
import computers from "./bookstoragelist/novel.vue";
import science from "./bookstoragelist/novel.vue";
import life from "./bookstoragelist/novel.vue";

export default {
  components: {
    novel,
    economy,
    inspirational,
    arts,
    historys,
    computers,
    science,
    life
  },
  data() {
    return {
      active: "novel",
      activeId: "books"
    };
  },
  methods: {
    backhome() {
      this.$router.push({
        path: "/home",
        name: "home"
      });
    }
  }
};
</script>

<style scoped>
/*底部选中下边框*/
#bookstorage .mint-navbar .mint-tab-item.is-selected {
  border-bottom: 1px solid #e60012;
  color: #e60012;
  margin-bottom: 3px;
}

#bookstorage .header {
  box-sizing: border-box;
}

#bookstorage .home-nav {
  max-width: 768px;
  overflow-x: auto;
}

#bookstorage .nav-title {
  white-space: nowrap;
  margin-left: 15px;
}

#bookstorage .lastnav {
  padding-right: 15px;
}
/*navbar-swper滑动颜色*/

.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 1px solid #e60012;
  color: #e60012;
}

.home-nav {
  margin-bottom: 20px;
  border-bottom: 1px solid #fafafa;
}

.mint-navbar .mint-tab-item.is-selected {
  margin-bottom: -2px;
}
</style>